<template>
    <div>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
            <el-form :model="formData" ref="form" label-width="120px" :inline="false">
                <!-- 基本信息区域 -->
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="计划编码">
                            <el-input v-model="formData.planCode" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="计划名称">
                            <el-input v-model="formData.planName" readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="计划类型">
                            <el-radio-group v-model="formData.planType" disabled>
                                <el-radio value="1">订单计划</el-radio>
                                <el-radio value="2">库存计划</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item v-if="formData.planType == 1" label="订单编号">
                            <el-input v-model="formData.salesOrderId" readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-divider content-position="left">产品信息</el-divider>


                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="产品编号">
                            <el-input v-model="products.materialId" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="产品名称">
                            <el-input v-model="products.materialName" readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="规格型号">
                            <el-input v-model="products.specifications" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="单位">
                            <el-input v-model="products.unit" readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8" :offset="0">
                        <el-form-item label="计划数量">
                            <el-input v-model="products.planQuantity" readonly>
                                <template #default="{ row }">
                                    <el-tag>{{ row.planQuantity }}</el-tag>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item label="已完成数量">
                            <el-input v-model="products.completedQuantity" readonly>
                                <template #default="{ row }">
                                    <el-tag :type="row.completedQuantity >= row.planQuantity ? 'success' : 'warning'">
                                        {{ row.completedQuantity }}
                                    </el-tag>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="0">
                        <el-form-item label="完成进度">
                            <el-input v-model="products.completionRate" readonly>
                                <template #default="{ row }">
                                    <el-progress :percentage="row.completionRate"
                                        :status="row.completionRate >= 100 ? 'success' : 'warning'">
                                    </el-progress>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-divider v-if="formData.planType == 1" content-position="left">客户信息</el-divider>



                <el-row :gutter="20" v-if="formData.planType == 1">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="客户编号">
                            <el-input v-model="formData.customerId" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="客户名称">
                            <el-input v-model="formData.customerName" readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="计划开始日期">
                            <el-date-picker v-model="formData.startDate" type="datetime" readonly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="计划结束日期">
                            <el-date-picker v-model="formData.endDate" type="datetime" readonly />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>


            <el-tabs type="border-card" class="detail-tabs">

                <el-tab-pane v-model="products" :key="products.materialId" :label="`${products.materialName} BOM需求`"
                    :name="`bom-${products.materialId}`">
                    <el-table :data="products.bomDTOList" border style="width: 100%">
                        <el-table-column prop="bomId" label="物料编号" />
                        <el-table-column prop="materialName" label="物料名称" />
                        <el-table-column prop="specificationsAndModels" label="规格型号" />
                        <el-table-column prop="unit" label="单位" />
                        <el-table-column prop="materialRatio" label="预计使用量" />
                    </el-table>
                </el-tab-pane>


            </el-tabs>

            <div class="detail-footer">
                <el-button type="primary" @click="handleClose">关闭</el-button>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, defineEmits, defineProps } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/api/request.js'

const router = useRouter()

let emits = defineEmits(['ref-table'])
let props = defineProps(["data"])

console.log(props.data)

// 表单数据
const formData = ref({})

const products = ref({})


let selectByPlanCode = () => {
    request({
        url: `production/plan/detailByPlanCode`,
        method: 'GET',
        params: {
            planCode: props.data.planCode
        }
    }).then(res => {
        formData.value = res.data[0]
        console.log(formData.value)
        products.value = { ...formData.value.products }
        console.log(products.value.materialId)
        //查询产品的bom需求
        request({
            url: "/bom/selectBom",
            method: "get",
            params: { materialId: products.value.materialId }
        }).then(res => {
            products.value.bomDTOList = res.data
            console.log(res);
        })
    })

}
selectByPlanCode()

const handleClose = () => {
    router.push('/production/order')
    emits('ref-table')
}

</script>

<style scoped>
/* 新增样式 */
.material-warning {
    color: #f56c6c;
    font-weight: bold;
}

.material-safe {
    color: #67c23a;
}

.tab-label {
    display: flex;
    align-items: center;
}

.tab-label .el-tag {
    margin-left: 8px;
}
</style>